<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="css/common.css?v=1.0.0" />
    <link rel="stylesheet" href="css/main.css?v=1.0.0" />
    <script src="plugin/swiper/swiper.min.js"></script>
    <script src="js/rem.js"></script>
    <script src="js/zepto.js"></script>
    <title>财富中心</title>
</head>

<body>
    <!-- 显示弹出的图片动画 -->
    <div class="indexShowImg">
        <img src="./img/indexBanner01.jpg">
    </div>
    <!-- END -->
    <div class="showLinear">
        <div class="header index-header">
            <img src="img/indexLogo.png" alt="" />
            <span class="index-header-title">
                <span class="weath">
                    <span>朝阳</span>
                    <span>晴</span>
                </span>
                <span class="temp">16°C/16°C</span>
            </span>
        </div>
        <div class="positionRe">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img class="wl-banner" src="img/indexBanner01.png" alt="" />
                        <span class="banner-text">商户导航</span>
                    </div>
                    <div class="swiper-slide">
                        <img class="wl-banner" src="img/indexBanner01.png" alt="" />
                        <span class="banner-text">商户导航</span>
                    </div>
                    <div class="swiper-slide">
                        <img class="wl-banner" src="img/indexBanner01.png" alt="" />
                        <span class="banner-text">商户导航</span>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination" style=" bottom: -5px"></div>
            </div>
            <div class="top-bar">
                <div class="th"><img src="img/top_01.png" alt="">财富金融中心</div>
                <div class="tb">
                    <ul>
                        <li>项目清单</li>
                        <li><img src="img/top_03.png" alt=""> 北京财富中心</li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="index-news">
            <div class="news-con">
                <img src="img/indexIcon01.png" alt="">
                <ul>
                    <li><a href="">重大重大消息重大消息重大消息消息</a> </li>
                    <li><a href="">重大消息重大消息重大消息重大消息aaaa</a></li>
                    <li><a href="">重大消息重大消息重大消息重大消息bbbb</a></li>
                </ul>
            </div>
        </div>
        <div class="container">
            <div class="grid">
                <ul class="row clear row-3">
                    <li>
                        <img src="img/index01.png" alt="" />
                        <span>访客登记</span>
                    </li>
                    <li>
                        <img src="img/index02.png" alt="" />
                        <span>缴费寻车</span>
                    </li>
                    <li>
                        <img src="img/index03.png" alt="" />
                        <span>最新资讯</span>
                    </li>
                    <li>
                        <img src="img/index04.png" alt="" />
                        <span>餐饮/配套</span>
                    </li>
                    <li>
                        <img src="img/index05.png" alt="" />
                        <span>房产租赁</span>
                    </li>
                    <li>
                        <img src="img/index06.png" alt="" />
                        <span>综合服务</span>
                    </li>
                </ul>
            </div>
            <div class="bottom-item">
                <img src="img/ind_b01.jpg" alt="">
                <img src="img/ind_b02.jpg" alt="">
                <img src="img/ind_b03.jpg" alt="">
                <img src="img/ind_b04.jpg" alt="">
                <img src="img/ind_b05.jpg" alt="">
            </div>
        </div>
    </div>
    <div class="place"></div>
    <div class="tab-bar">
        <a class="tab active home" href="index.html">
            <span><img src="img/tab-bar01-active.png" alt="" /></span>
            <span>首页</span>
        </a>
        <a class="tab" href="recommend.html">
            <span><img src="img/tab-bar02.png" alt="" /></span>
            <span>推荐</span>
        </a>
        <a class="tab " href="my.html">
            <span><img src="img/tab-bar03.png" alt="" /></span>
            <span>我的</span>
        </a>
    </div>
</body>

</html>
<script src="js/main.js"></script>
<script>
    // 首页动画
    $(document).ready(function () {
        $('.indexShowImg').animate({
            opacity: 1
        }, 0, function () {
            setTimeout(function () {
                $('.indexShowImg').animate({
                    opacity: 0
                }, 0, function () {
                    $(this).hide(0, function () {
                        $('.showLinear').css({
                            opacity: 1
                        })
                    })
                })
            }, 10)
        })
    })
    //end
    var swiper = new Swiper(".swiper-container", {
        autoplay: true,
        pagination: {
            el: ".swiper-pagination"
        }
    });

    function newShow(time) {
        let liLength = $(".news-con li").length;
        let index = 1;
        console.log("-0.45" * index + "rem");
        let timer = setInterval(function () {
            if (index == liLength) {
                index = 0;
            }
            $(".news-con ul").animate({
                    top: "-0.45" * index + "rem"
                },
                300
            );
            index++;
        }, time);
    }
    newShow(2000);
</script>